.modal {
  @include position(absolute, 0 null null 0);
  @include size(100%);
  @include th { background-color: rgba(background-color(), .9); }
  z-index: $z-index-modal;

  transition: background-color $base-duration $base-timing;
  &.modal--hidden {
    @include th { background-color: rgba(background-color(), 0); }
  }

  &__content {
    @include size(100%);
    @include display(flex);
    @include align-items(stretch);
    @include flex-direction(column);
    @include justify-content(center);

    transition: all $base-duration $base-timing;
    .modal--hidden & {
      transform: scale(0.01);
      opacity: 0;
    }
  }

  &__icon {
    font-size: $modal-icon-size;
    text-align: center;
  }
  &__header {
    @include user-select(text);
    text-align: center;
    font-size: $small-header-font-size;
  }
  &__body {
    @include user-select(text);
    text-align: left;
    margin: $base-spacing;
  }
  &__buttons {
    text-align: right;
    button ~ button {
      margin-left: $small-spacing;
    }
    >button {
      margin-bottom: $small-spacing;
    }
  }
  &__body, &__buttons {
    @include align-self(center);
    width: 40%;
    @include tablet {
      width: 90%;
    }
  }
  &__check-wrap {
    margin-top: $base-spacing;
  }
  &__pre {
    white-space: pre-wrap;
  }
}
